<template>
  <div id="main">
    <div class="wrap">
      <div class="f1"></div>
      <div class="f2">
        <div class="sign">
          <div class="row">
            <div class="row1">
              <input
                v-model="nick"
                type="text"
                placeholder="请输入您的用户名"
              />
            </div>
            <span
              :class="nameSpan"
              :style="{ display: nick == '' ? 'none' : '' }"
              >{{ nameSpan.msg }}</span
            >
          </div>
          <div class="row">
            <div class="row2">
              <input
                v-model="pwd"
                type="password"
                placeholder="请输入您的密码"
              />
            </div>
            <span
              :class="pwdSpan"
              :style="{ display: pwd == '' ? 'none' : '' }"
              >{{ pwdSpan.msg }}</span
            >
          </div>
          <div class="row">
            <div class="row3">
              <input
                v-model="newPwd"
                type="password"
                placeholder="请再次输入您的密码"
              />
            </div>
            <span
              :style="{ display: newPwd == '' ? 'none' : 'block' }"
              :class="toggle ? 'fail' : ''"
              >{{ msg }}</span
            >
          </div>
        </div>
        <input type="submit" value="注册" class="btn" @click="judge" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nick: "",
      nameSpan: {
        success: false,
        fail: false,
        msg: "",
      },
      pwd: "",
      newPwd: "",
      pwdSpan: {
        success: false,
        fail: false,
        msg: "",
      },
      tsg: "",
      toggle: false,
    };
  },
  methods: {
    judge() {
      if (this.pwd !== this.newPwd) {
        this.msg = "两次输入密码不一致";
        this.toggle = true;
      }else{
        this.axios.post('/user/register',`uname=${this.nick}&upwd=${this.pwd}`).then(result=>{
          console.log(result.data);
          if(result.data.code==200){
            this.$router.push('/')
          }else{
            alert('该用户已注册')
          }
        })
      }
    },
  },
  watch: {
    nick() {
      var reg = /^[a-zA-Z0-9_-]{4,12}$/;
      var result = reg.test(this.nick);
      if (result == true) {
        this.nameSpan = {
          success: true,
          pwdSpan: false,
          msg: "用户名格式正确",
        };
      } else {
        this.nameSpan = {
          success: false,
          fail: true,
          msg: "请输入4-12位字母数字或下划线",
        };
      }
    },
    pwd() {
      var reg = /^\d{6}$/;
      var result = reg.test(this.pwd);
      if (result == true) {
        this.pwdSpan = {
          success: true,
          fail: false,
          msg: "密码格式正确",
        };
      } else {
        this.pwdSpan = {
          success: false,
          fail: true,
          msg: "请输入6位的数字",
        };
      }
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
#main {
  width: 100%;
  height: 100%;
  list-style: none;
  color: #666;
  background: #f4f2ee;
}
.f1 {
  width: 230px;
  height: 169px;
  margin: 32px auto 0;
  background: url(https://zypay.ireader.com/static/i/logo.png) no-repeat;
}
.f2 {
  width: 320px;
  margin: 26px auto 0;
}
.sign{
  background-color:rgb(255, 255, 255,.6);
}
.success {
  color: #fff;
    font-size: 12px;
    border-radius: 11px;
    background-color: #00cc00;
    width: 102px;
    height: 18px;
    margin-top: 13px;
    text-align: center;
    line-height: 17px;
    margin-left: 5px;
}
.fail {
  color: #fff;
    font-size: 12px;
    border-radius: 11px;
    background-color:  #ff2400;
    width: 175px;
    height: 18px;
    margin-top: 13px;
    text-align: center;
    line-height: 17px;
    margin-left: 5px;
 
}

.sign_op {
    padding-right: 24px;
    text-align: right;
    height: 30px;
    line-height: 30px;
}
.sign_op input{
  height: 14px !important;
}
.sign_op .default{
  float: left;
  line-height: 30px;
}
.sign .row {
  display: flex;
  width: 500px;
}
.row1,.row2,.row3 {
  border: #cbcbcb 1px solid;
  height: 44px;
  width: 320px;
  line-height: 44px;
  font-size: 14px;
  outline: none;
  background: none;
  margin-left: 0;
  margin-bottom: 25px;
  padding: 0px 0px 0px 12px;
}
.sign input{
  border: 0;
  outline: none;
  background-color:rgb(255, 255, 255,0);
}
.row1 .row2 > button {
  width: 96px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  cursor: pointer;
  border-radius: 2px;
  background: #bbb;
  position: absolute;
  top: 7px;
  right: 12px;
  background: #ff7200;
  z-index: 10;
  border: none;
}
.btn {
  width: 100%;
  height: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  background: #ff7200;
  margin-top: 24px;
}
</style>